<template>
  <div class="page-container">
    <div v-for="(theme, index) in themePages" :key="index">
      <div v-if="theme" class="saved" :class="{'select': theme.id === tId}" @click="handleSelect(theme)">
        <header>
          <h1 class="page-name">{{ theme.name }}</h1>
        </header>
        <div class="thumbnail">
          <vue-scroll
                  :ops="ops"

          >
            <grid-layout
                    :layout="theme.portletList"
                    :col-num="12"
                    :row-height="1"
                    :is-draggable="draggable"
                    :is-resizable="resizable"
                    :vertical-compact="true"
                    :use-css-transforms="false"
                    :margin="[3, 3]"
            >
              <grid-item
                      v-for="item in theme.portletList"
                      :x="item.x"
                      :y="item.y"
                      :w="item.w"
                      :h="item.h"
                      :i="item.i"
                      :key="item.i"
              >
                <!--<div
                        :is="item.content.type === 'multiple' ? 'Multiple' : 'TemplatePortlet'"
                        :name="item.content.name"
                        :icon="item.content.icon"
                >
                </div>-->
              </grid-item>
            </grid-layout>
          </vue-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueGridLayout from '~/static/js/vue-grid-layout.common';
import VueScroll from 'vuescroll';
// import TemplatePortlet from './TemplatePortlet';
// import bus from '../../common/bus';
// import appUtil from '~/assets/utils/appUtil.js';
import { createNamespacedHelpers } from 'vuex';
const { mapState,mapMutations, mapActions } = createNamespacedHelpers('homeModule');
const { mapMutations: mapMutationsTag } = createNamespacedHelpers('tagModule');
export default {
    components: {
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem,
        VueScroll,
        // TemplatePortlet,
    },
    name: 'page-list',
    props: ['themePages', 'tId'],
    data() {
        return {
            draggable: false,
            resizable: false,
            themeReady: false,
            ops: {
                rail: {
                    opacity: '0',
                    //size: '10px'
                },
                bar: {
                    keepShow: false,
                    onlyShowBarOnScroll: true,
                    background: '#a6a6a6',
                    size: '7px',
                },
            },
        };
    },
    created(){
        
    },
    computed: {
        ...mapState({
            currentRoleTheme:state => state.currentRoleTheme
            
        }),
    },
    methods: {
        ...mapMutations(['updateRoleTheme']),
        ...mapActions(['getEngSwitchAsync']),
        ...mapMutationsTag(['updatedTag']),
        handleSelect(item){
            if(item.id !== this.tId){
                // 切换主题
                this.getEngSwitchAsync(item.id).then(() => {
                    this.updateRoleTheme(item.id);
                    this.updatedTag(this.currentRoleTheme);
                });
                
            }
        },
    },
    mounted() {
        //console.log(this.themePages);
        //console.log(this.tId);
    },
    watch: {
        themePages: {
            handler(){
                /*newVal.every( theme => {
            return theme;
          })*/
            }
        },
    }
};
</script>

<style lang="scss">
  .page-container{

    .vue-grid-layout{
      background-color: #e6e6e6;
      top: 0;
    }

    .vue-grid-item {
      background-color: white;
      overflow: hidden;
      box-sizing: border-box;
    }
  }

</style>
<style scoped lang="scss">
  $primary-color: #409EFF;
  $primary-background-color: #ecf5ff;
  .page-container{
    overflow: hidden;

    .page-name{
      font-size: 14px;
      padding: 5px;
      text-align: center;
      font-weight: 400;
    }
    .saved{
      border: 1px solid #ddd;
      padding: 5px 0 10px;
      margin: 10px 0;
      cursor: pointer;
    }
    .thumbnail{
      margin: auto;
      width: 85%;
      height: 82px;
      background-color: #e6e6e6;
    }

    .select{
      border: 1px solid $primary-color;
      transition: all 0.5s;
    }
  }

</style>